import React, { useState, useEffect }  from 'react'
import { Form, Select, Input, Col, DatePicker, Table, Card } from 'antd'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchReceive } from '@/services/dataCenter/cardData'
import moment from 'moment'
const {RangePicker} = DatePicker
import { connect } from 'dva'

const FormC = props => {
  const { form, stores, counpClassify, dispatch, couponSendTypes, couponTypes, couponStatuses, scenesList } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(null)
  const [receiveList, setReceiveList] = useState([])

  const dateFormat = 'YYYY-MM-DD'




  // 按钮处理
  const handleBtn = type => {

  }

  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }

  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
  })
  useEffect(() => {
    _fetchReceive(param)
    // 获取当前商户下的所有门店
    dispatch({
      type: 'dataCenter/fetchStores',
      payload: {
        supplierId: 1072,
        pageSize: 999,
      }
    })
  }, [])


  const _fetchReceive = async (param) => {
    const res = await fetchReceive(param)
    if (res.code == 0) {
      setReceiveList(res.data)
      setTotalPage(res.total)
    }
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetchReceive({
        ...param,
        ...values,
      })
    })
  }
  const statuses = [
    {
        label: '已删除',
        value: '99'
    },
    {
        label: '未使用',
        value: '0'
    },
    {
        label: '已使用',
        value: '1'
    },
    {
        label: '已锁定',
        value: '2'
    },
    {
        label: '失效',
        value: '3'
    },
  ]
  // 查询条件
  const getFields = () => {
    return(<>
      <Col span={8}>
        <Form.Item label="优惠券名称" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="核销人" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('staffName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="门店" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponClassId', {})
            (<Select>
              {stores && stores.map(m => <Select.Option key={m.id} value={m.id}>{m.name}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="核销场景" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponType', {})
            (<Select>
              {scenesList.map(m => <Select.Option key={m.value} value={m.value}>{m.label}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="状态" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('status', {})
            (<Select>
              {statuses.map(m => <Select.Option key={m.value} value={m.value}>{m.label}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="有效日期" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`dateTime`, {
            defaultValue: [moment(), moment()]
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _fetchReceive({
        ...param,
        pageNo: page,
      })
    }
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '优惠券名称',
      dataIndex: 'couponName',
      key: 'couponName'
    },
    {
      title: '面值',
      dataIndex: 'couponType',
      key: 'couponType',
      render: (v, r, i) => {
        if (r.couponType == 1) {
          return (<span>{r.denomination}</span>)
        } else {
          return (<span>{r.discountRate + '%'}</span>)
        }
      }
    },
    {
      title: '使用条件',
      dataIndex: 'limitPrice',
      key: 'limitPrice',
      render: (v, r, i) => {
        return (<span>满 {v} 可使用</span>)
      }
    },
    {
      title: '领取人',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    {
      title: '领取时间',
      dataIndex: 'receiveTime',
      key: 'receiveTime'
    },
    {
      title: '使用时间',
      dataIndex: 'usedTime',
      key: 'usedTime'
  },
    {
      title: '订单编号',
      dataIndex: 'orderId',
      key: 'orderId'
    },
    {
      title: '使用门店',
      dataIndex: 'useStoreName',
      key: 'useStoreName'
    },
    {
      title: '核销员工',
      dataIndex: 'staffName',
      key: 'staffName'
    },
    {
      title: '员工编号',
      dataIndex: 'staffId',
      key: 'staffId'
    },
    {
      title: '状态',
      dataIndex: 'staffId',
      key: 'statusStr',
    }
  ]
  return (<>
    <Card>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    </Card>
    <Card style={{marginTop: '10px'}}>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={receiveList}/>
    </Card>
  </>)
}


export default connect(({ dataCenter }) => ({
  stores: dataCenter.stores,
}))(Form.create({})(FormC))
